<template>
  <div class="control">
    <div class="cur_view card">
      <div class="view_top">
        <span><h3>无人机控制界面</h3></span>
        <span><h3>状态栏</h3></span>
      </div>
      <div class="view_main">
        <video controls>
          <source src="@/assets/control.mp4" type="video/mp4" />
        </video>
      </div>
    </div>
    <div class="cur_control">
      <div class="control_view card">
        <div class="title"><h3>手动控制摇杆</h3></div>
        <div class="bg_big card">
          <div class="bg_samll absolute card"></div>
          <div class="btn_bg">
            <div class="up absolute button" @click="go('up')">
              <el-icon><CaretTop /></el-icon>
            </div>
            <div class="left absolute button" @click="go('left')">
              <el-icon><CaretLeft /></el-icon>
            </div>
            <div class="right absolute button" @click="go('right')">
              <el-icon><CaretRight /></el-icon>
            </div>
            <div class="down absolute button" @click="go('down')">
              <el-icon><CaretBottom /></el-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="postion_list card">
        <div class="title"><h3>多点自动巡航</h3></div>
        <div class="list">
          <div class="postion_item" v-for="(item, i) in postions" :key="i">
            <div class="postion_index">地点{{ i + 1 }}:</div>
            <div class="postion_postion"><el-input v-model="item.value" /></div>
          </div>
        </div>
        <div class="btn card">确定</div>
      </div>
      <div class="picture">
        <div class="voice_control card">
          <img src="@/assets/images/yy.png" />
          <div class="picture_title">语音控制</div>
        </div>
        <div class="battery_monitoring card">
          <img src="@/assets/images/dc.png" />
            <div class="picture_title">电池监控</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue"
const postions = reactive([
  {
    value: "",
  },
  {
    value: "",
  },
  {
    value: "",
  },
])
const go = (flag: string) => {
  console.log(flag)
}
</script>

<style lang="scss" scoped>
.control {
  display: flex;
  width: 100%;
  height: 100%;

  .cur_view {
    width: calc(65% - 32px);
    height: calc(100% - 32px);
    margin: 16px;
    .view_top {
      display: flex;
      height: 50px;
      line-height: 50px;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;
      background-color: rgba(0, 0, 0, 0.3);
      span {
        width: 50%;
        text-align: center;
      }
      span:first-of-type {
        width: 50%;
        border-right: 1px solid black;
      }
    }
    .view_main {
      height: calc(100% - 53px);
      width: 100%;
      video {
        display: block;
        height: 100%;
        width: 100%;
      }
    }
  }
  .cur_control {
    width: calc(35% - 16px);
    height: calc(100% - 32px);
    margin-top: 16px;
    .title {
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;
      background-color: rgba(0, 0, 0, 0.3);
    }
    .control_view {
      height: calc(50% - 16px);
      width: 100%;

      .bg_big {
        position: relative;
        height: calc(100% - 70px);
        margin: auto;
        margin-top: 10px;
        border-radius: 50%;
        border: 1px solid var(--button-border);
        aspect-ratio: 1;
        .absolute {
          position: absolute;
        }
        .bg_samll {
          width: 50%;
          height: 50%;
          top: 25%;
          left: 25%;
          border-radius: 50%;
          border: 1px solid var(--button-border);
        }
        .btn_bg {
          position: relative;
          width: 100%;
          height: 100%;
          .button {
            width: 40px;
            height: 40px;
            /* border: 1px solid var(--button-border); */
            .el-icon {
              font-size: 40px;
              text-align: center;
            }
            .el-icon:hover {
              transform: scale(1.5);
            }
          }

          .up {
            left: calc(50% - 20px);
          }
          .down {
            left: calc(50% - 20px);
            top: calc(100% - 40px);
          }
          .left {
            top: calc(50% - 20px);
          }
          .right {
            top: calc(50% - 20px);
            left: calc(100% - 40px);
          }
        }
      }
    }
    .postion_list {
      height: calc(35% - 16px);
      margin-top: 16px;
      padding-bottom: 1px;
      .list {
        height: calc(100% - 100px);
        .postion_item {
          display: flex;
          height: 40px;
          line-height: 40px;
          padding: 0 16px;
          /* border:1px solid red; */
          .postion_index {
            width: 50px;
          }
          .postion_postion {
            width: calc(100% - 80px);
            /* border:1px solid red; */
            .el-input {
              /* display: inline; */
              width: 100%;
              margin: auto 8px;
              opacity: 0.5;
            }
          }
        }
      }
      .btn {
        width: 80px;
        height: 40px;
        line-height: 40px;
        margin: 5px auto;
        text-align: center;
        cursor: pointer;
      }
    }
    .picture {
      display: flex;
      height: calc(15% - 4px);
      margin-top: 16px;
      .voice_control,
      .battery_monitoring {
        display: flex;
        justify-content: center;
        text-align: center;
        width: calc(50% - 8px);
        font-size: 24px;
        cursor: pointer;
        img {
          width: 36px;
          height: 30px;
          margin: auto 0;
          margin-right: 8px;
        }
        .picture_title {
          margin: auto 0;
        }
      }
      .battery_monitoring {
        margin-left: 16px;
      }
    }
  }
}
</style>
